<template>
  <view class="language-setting-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <uv-icon name="arrow-left" size="20" color="#333"></uv-icon>
        </view>
        <view class="navbar-title">语言设置</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 顶部装饰 -->
      <view class="header-decoration">
        <view class="decoration-circle decoration-circle-1"></view>
        <view class="decoration-circle decoration-circle-2"></view>
      </view>

      <!-- 语言列表卡片 -->
      <view class="language-card">
        <view class="card-header">
          <!-- <view class="header-icon">
            <uv-icon name="globe" size="24" color="#00d4aa"></uv-icon>
          </view> -->
          <text class="card-title">选择语言 / Select Language</text>
        </view>

        <view class="language-list">
          <view
            v-for="(lang, index) in languageOptions"
            :key="lang.key"
            class="language-item"
            :class="{ 
              active: currentLanguage === lang.key,
              'no-border': index === languageOptions.length - 1
            }"
            @click="selectLanguage(lang)"
          >
            <view class="item-left">
              <view class="flag-wrapper">
                <text class="flag">{{ lang.flag }}</text>
              </view>
              <view class="item-info">
                <text class="language-name">{{ lang.label }}</text>
                <text class="language-code">{{ lang.key }}</text>
              </view>
            </view>
            <view class="item-right">
              <view v-if="currentLanguage === lang.key" class="check-icon">
                <uv-icon name="checkmark-circle-fill" size="24" color="#00d4aa"></uv-icon>
              </view>
              <view v-else class="arrow-icon">
                <uv-icon name="arrow-right" size="20" color="#c8c9cc"></uv-icon>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <!-- 切换语言确认弹窗 -->
    <uv-modal
      ref="confirmModal"
      title="切换语言"
      :content="modalContent"
      :show-cancel-button="true"
      confirm-text="确认"
      cancel-text="取消"
      confirm-color="#00d4aa"
      @confirm="confirmSwitch"
    ></uv-modal>
  </view>
</template>

<script>
export default {
  name: 'LanguageSetting',
  data() {
    return {
      statusBarHeight: 0,
      currentLanguage: 'zh-CN', // 当前选中的语言
      selectedLang: null, // 待切换的语言
      modalContent: '', // 弹窗内容
      languageOptions: [
        { 
          key: 'zh-CN', 
          label: '简体中文', 
          flag: '🇨🇳',
          desc: 'Simplified Chinese'
        },
        { 
          key: 'zh-TW', 
          label: '繁體中文', 
          flag: '🇹🇼',
          desc: 'Traditional Chinese'
        },
        { 
          key: 'en', 
          label: 'English', 
          flag: '🇺🇸',
          desc: 'English'
        },
        { 
          key: 'tr', 
          label: 'Türkçe', 
          flag: '🇹🇷',
          desc: 'Turkish'
        },
      ],
    }
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
    
    // 从缓存中读取当前语言设置
    const savedLanguage = uni.getStorageSync('app_language')
    if (savedLanguage) {
      this.currentLanguage = savedLanguage
    }
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack()
    },

    /**
     * 选择语言
     */
    selectLanguage(lang) {
      console.log('选择语言:', lang)
      
      if (this.currentLanguage === lang.key) {
        uni.showToast({
          title: '当前已是该语言',
          icon: 'none'
        })
        return
      }

      // 保存待切换的语言
      this.selectedLang = lang
      this.modalContent = `确定要切换到 ${lang.label} 吗？`
      
      // 显示确认弹窗
      this.$refs.confirmModal.open()
    },

    /**
     * 确认切换语言
     */
    confirmSwitch() {
      if (this.selectedLang) {
        this.switchLanguage(this.selectedLang)
      }
    },

    /**
     * 切换语言
     */
    switchLanguage(lang) {
      console.log('切换语言到:', lang)
      
      uni.showLoading({
        title: '切换中...',
        mask: true
      })

      // 保存语言设置到缓存
      uni.setStorageSync('app_language', lang.key)
      
      setTimeout(() => {
        this.currentLanguage = lang.key
        uni.hideLoading()
        
        uni.showToast({
          title: `已切换到 ${lang.label}`,
          icon: 'none',
          duration: 1500
        })

        // 这里可以调用多语言API或本地化逻辑
        // TODO: 实现实际的语言切换逻辑
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 800)
    }
  }
}
</script>

<style lang="scss" scoped>
.language-setting-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8fffe 0%, #f7f8fa 30%);
  position: relative;
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1000;
  border-bottom: 1rpx solid #eee;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16rpx;
}

.navbar-left,
.navbar-right {
  width: 80rpx;
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

/* 内容区域 */
.content-wrapper {
  margin-top: calc(44px + var(--status-bar-height));
  padding: 24rpx;
  position: relative;
}

/* 顶部装饰 */
.header-decoration {
  position: absolute;
  top: -80rpx;
  left: 0;
  right: 0;
  height: 200rpx;
  overflow: hidden;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.decoration-circle-1 {
  width: 300rpx;
  height: 300rpx;
  background: linear-gradient(135deg, #00d4aa, #00c299);
  top: -100rpx;
  left: -80rpx;
}

.decoration-circle-2 {
  width: 200rpx;
  height: 200rpx;
  background: linear-gradient(135deg, #00c299, #00b088);
  top: -50rpx;
  right: -60rpx;
}

/* 语言卡片 */
.language-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 212, 170, 0.08);
  margin-bottom: 24rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #e8fffe, #f0fffc);
  border-radius: 12rpx;
  margin-right: 12rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

/* 语言列表 */
.language-list {
  margin: 0 -8rpx;
}

.language-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 8rpx;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.3s;
  border-radius: 12rpx;

  &.no-border {
    border-bottom: none;
  }

  &:active {
    background: #f7f8fa;
  }

  &.active {
    background: linear-gradient(135deg, #e8fffe, #f0fffc);
    
    .language-name {
      color: #00d4aa;
      font-weight: 600;
    }
  }
}

.item-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.flag-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  background: #f7f8fa;
  border-radius: 50%;
  margin-right: 16rpx;
}

.flag {
  font-size: 36rpx;
  line-height: 1;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.language-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 4rpx;
}

.language-code {
  font-size: 22rpx;
  color: #999;
}

.item-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  display: flex;
  align-items: center;
}

.arrow-icon {
  display: flex;
  align-items: center;
}

/* 提示卡片 */
.tips-card {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #e8fffe, #f0fffc);
  border-radius: 16rpx;
  border: 1rpx solid #c4f5ef;
  margin-bottom: 24rpx;
}

.tips-icon {
  margin-right: 12rpx;
}

.tips-text {
  flex: 1;
  font-size: 26rpx;
  color: #00a88e;
  line-height: 1.6;
}

</style>

